<template>
	<view>
		<view class="details">
			<view class="title">
				<text class="text">任务信息编辑</text>
			</view>
			<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
				<tBody>
					<tr>
						<td class="td_1">任务名称:</td>
						<td class="td">{{details.name}}</td>
					</tr>
					<tr>
						<td class="td_1">任务类型:</td>
						<td class="td">{{details.taskTypeText}}</td>
					</tr>
					<tr>
						<td class="td_1">对象类型:</td>
						<td class="td">{{details.targetTypeText}}</td>
					</tr>
					<tr>
						<td class="td_1">责任对象类型:</td>
						<td class="td">{{details.dutyObjectTypeText}}</td>
					</tr>
					<tr>
						<td class="td_1">责任对象:</td>
						<td class="td">{{details.dutyObjectText}}</td>
					</tr>
					<tr>
						<td class="td_1">任务地点:</td>
						<td class="td">{{details.taskAddress}}</td>
					</tr>
					<tr>
						<td class="td_1">任务内容:</td>
						<td class="td">{{details.content}}</td>
					</tr>
					<tr>
						<td class="td_1">备注:</td>
						<td class="td">{{details.remark}}</td>
					</tr>
					<tr>
						<td class="td_1">开始时间:</td>
						<td class="td">{{details.taskStartTime}}</td>
					</tr>
					<tr>
						<td class="td_1">截止时间:</td>
						<td class="td">{{details.taskEndTime}}</td>
					</tr>
				</tBody>
			</table>
			<view class="title">
				<text class="text">任务反馈:</text>
			</view>
			<view class="feedbackTxt">
				<text>反馈内容:</text>
				<hr>
				<textarea placeholder="请输入..." maxlength="2000" v-model="opinion"></textarea>
			</view>
			<view class="notesTxt">
				<text>反馈备注:</text>
				<hr>
				<textarea v-model="remark" placeholder="请输入..."></textarea>
			</view>
		</view>
		<view class="uni-btn-v">
			<button form-type="submit" type="primary" @click="disarmTheAlarm()">完成任务</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flagId: '',
				details: {},
				opinion: '', //反馈内容
				remark:''
			}
		},
		onLoad: function(option) {
			this.flagId = option.flagId
			this.etToDoDetails()
			// console.log(JSON.stringify(this.warningDetails))
			console.log(this.flagId)
		},

		methods: {
			//获取待办详情
			async etToDoDetails() {
				const res = await this.$myRequest({
					url: '/api-operate/order-task/' + this.flagId,
					method: "get",
				})
				if (res.success == true) {
					this.details = res.body.orderTask
					console.log(JSON.stringify(this.details))
					uni.$emit("planAdd", {
						status: 1,
						id: this.id
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.details {
		background-color: #FFFFFF;
		width: 90%;
		height: auto;
		border-radius: 10rpx;
		margin: 20rpx auto 0 auto;
		padding: 10rpx 0 20rpx 0;

		.title {
			width: 100%;
			height: 50rpx;
			margin: 20rpx 0;
			padding-left: 3%;
			line-height: 50rpx;

			.text {
				width: 100%;
				font-size: 35rpx;

				color: #109EF8;
			}
		}

		.feedbackTxt {
			height: 220rpx;
			border-bottom: 3px solid #e2e2e2;
			padding-left: 3%;
			display: flex;
			flex-direction: column;
		
			text {
				height: 50rpx;
				color: #959595;
			}
			hr {
				width: 95%;
			}
			textarea {
				width: 99%;
				height: calc(220rpx - 24%);
				color: #000000;
			}
		}
		
		.notesTxt {
			height: 200rpx;
			border-bottom: none;
			display: flex;
			flex-direction: column;
			margin-top: 1%;
			padding-left: 3%;
			hr {
				width: 95%;
			}
			text {
				height: 50rpx;
				color: #959595;
			}
		
			textarea {
				width: 94%;
				height: calc(200rpx - 28%);
				color: #000000;
			}
		}

		.ctl {
			display: flex;
			table-layout: fixed;

			.td_1 {
				color: #959595;
				height: 60rpx;
				// vertical-align: top;
				width: 30%;
				word-break: break-all;
				padding-left: 3%;
			}

			.td {
				height: 60rpx;
				width: 70%;
				word-break: break-all;
				padding: 0 3%;
				color: #000000;
			}
		}
	}

	.uni-btn-v {
		width: 80%;
		margin: 50rpx auto;
	}
</style>
